<template>
    <div class="head-container">
        <el-row>
            <el-col :span="18">
                <el-input v-model="key" disabled placeholder="请输入分类名称" clearable :prefix-icon="Search"
                    style="margin-bottom: 20px" />
            </el-col>
            <el-col :span="2">

            </el-col>
            <el-col :span="4">
                <!-- <el-button :icon="Plus" circle @click="openModal" /> -->
            </el-col>
        </el-row>

    </div>

    <div class="head-container">
        <el-tree :data="jobStore.types" :props="{ label: 'jobTypeName', children: 'children' }"
            :expand-on-click-node="false" :filter-node-method="filterNode" ref="treeRef" highlight-current
            :default-expand-all="false" @node-click="handleNodeClick">
            <template #default="{ node, data }">
                <view style="padding-right: 15px;">
                </view>
                {{ node.label }}

            </template>
        </el-tree>
    </div>
    <AntdConfirmModal title="新建职级分类" ref="antdModalRef" :keepSlot="false" @confirm="submitTypeForm">
        <a-form :model="form" name="basic" :label-col="{ span: 6 }">
            <a-form-item label="职级分类名称" name="jobGradeTypeName" :rules="[{ required: true, message: '请输入职级分类名称' }]">
                <a-input v-model:value="form.jobGradeTypeName" />
            </a-form-item>

            <a-form-item label="职级分类编码" name="jobGradeTypeCode" :rules="[{ required: true, message: '请输入职级分类编码' }]">
                <a-input v-model:value="form.jobGradeTypeCode" />
            </a-form-item>

            <a-form-item label="职级分类排序" name="jobGradeTypeSort">
                <a-input-number v-model:value="form.jobGradeTypeSort" />
            </a-form-item>
            <a-form-item :name="remark" label="备注">
                <a-textarea v-model:value="form.remark" />
            </a-form-item>
        </a-form>

    </AntdConfirmModal>
</template>
<script setup>
import { Search, Plus, Delete } from '@element-plus/icons-vue'
import useJobStore from '../../../store/job';
const jobStore = useJobStore()
import useApp from '@/hooks'
const { $, proxy } = useApp()
const emit = defineEmits(['confirm', 'update:value'])

const props = defineProps({
    value: {
        type: [Number, String]
    }
})
const key = ref()
const form = ref({
    jobGradeTypeName: undefined,
    jobGradeTypeCode: undefined,
    jobGradeTypeSort: 0,
    remark: undefined
})
const treeRef = ref(null)
const antdModalRef = ref(null)



function deleteType(e) {
    $.showModal({
        title: '提醒',
        type: 'warning',
        content: '是否删除该分类',
        cancelText: '取消'
    }).then(r => {
        if (r.confirm) {

            jobStore.deleteType(e.data.id).then(res => {
                $.showToast({
                    title: '删除成功',
                    icon: 'success'
                })
            })
        } else {

        }
    })

}


// 点击新建
function openModal() {
    antdModalRef.value.openModal()
}
/** 节点单击事件 */
function handleNodeClick(e) {
    console.log(e.id)
    emit('update:value', e.id)
    emit('confirm', e.id)

}
// 新建
function submitTypeForm() {
    jobStore.addType(form.value).then(res => {
        console.log(res)
        $.showToast({
            title: '创建成功',
            icon: 'success'
        })
        antdModalRef.value.closeModal()
    })
}
// 调用查询
jobStore.getTypes()
</script>
<style></style>*